<template>
  <div style="margin: 15px; margin-right: 30px;">
    <el-form ref="form" :rules="rules" :model="form" label-width="130px">
      <el-form-item label="发票抬头" prop="invoiceTitle">
        <el-input v-model="form.invoiceTitle" placeholder="请输入发票抬头" />
      </el-form-item>
      <el-form-item label="开票类型" prop="type">
        <el-select v-model="form.type" filterable placeholder="开票类型" @change="changeType" disabled>
          <el-option
            v-for="item in parentData.typeOptions"
            :key="item.code"
            :label="item.name"
            :value="item.code"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="纳税人识别号" prop="taxRegistrationNumber">
        <el-input v-model="form.taxRegistrationNumber" placeholder="纳税人识别号" />
      </el-form-item>
      <el-form-item label="基本开户银行" prop="bank">
        <el-select v-model="form.bank" filterable placeholder="基本开户银行">
          <el-option
            v-for="item in parentData.bankOptions"
            :key="item.code"
            :label="item.name"
            :value="item.code"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="基本开户账号" prop="accountNumber">
        <el-input v-model="form.accountNumber" placeholder="请输入基本开户账号" />
      </el-form-item>
      <el-form-item label="注册场所地址" prop="registeredAddress">
        <el-input v-model="form.registeredAddress" placeholder="请输入注册场所地址" />
      </el-form-item>
      <el-form-item label="注册固定电话" prop="registeredFixedPhone">
        <el-input v-model="form.registeredFixedPhone" placeholder="请输入注册固定电话" />
      </el-form-item>
      <template v-if="isReceiverUserNameShow">
        <el-form-item label="实际收票人" prop="receiverUserCode" >
          <el-select v-model="form.receiverUserCode" placeholder="实际收票人" disabled>
            <el-option
              v-for="item in receiverUserNameOptions"
              :key="item.partyCode"
              :label="item.userName"
              :value="item.partyCode"
            />
          </el-select>
        </el-form-item>
      </template>
      <el-form-item label="收件人联系电话" prop="receiverPhone">
        <el-input v-model="form.receiverPhone" placeholder="请输入收件人联系电话" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="funcCancel">取 消</el-button>
      <el-button type="primary" @click="funcSubmit">确 定</el-button>
    </div>
  </div>
</template>
<script>
import {
  getInvoiceInfo,
  getShipperList,
  editInvoiceInfo
} from "@/api/shipment";
import {validatePhone, validateTelephone} from '@/utils/validate'
export default {
  name: "InvoiceMessageEdit",
  props: {
    parentData: {
      type: Object,
      default() {
        return {
          areaOptions: [],
          receiverUserCodeOptions: [],
          typeOptions: [],
          bankOptions: []
        };
      }
    }
  },
  data() {
    return {
      companyCode: '',
      receiverUserNameOptions: [],
      isReceiverUserNameShow: true,
      form: {},
      rules: {
        receiverUserCode: [
          { required: true, message: '请选择实际收票人', trigger: 'change' },
          { min: 1, max: 255, message: '长度在 1 到 255个字符', trigger: 'blur' }
        ],
        invoiceTitle: [
          { required: true, message: '请输入发票抬头', trigger: 'blur' },
          { min: 1, max: 255, message: '长度在 1 到 255个字符', trigger: 'blur' }
        ],
        receiverPhone: [
          { required: true, message: '请输入收件人联系电话', trigger: 'blur' },
          { 
            validator(rule, value, callback) {
              if(!validatePhone(value) && !validateTelephone(value)){
                callback(new Error("电话格式有误"))
              }
              else{
                 callback();
              }
            }, 
            trigger: 'blur' 
          }
        ],
        type: [
          { required: true, message: '请选择开票类型', trigger: 'change' }
        ],
        taxRegistrationNumber: [
          { required: true, message: '请输入纳税人识别号', trigger: 'blur' },
          { min: 1, max: 128, message: '长度在 1 到 128个字符', trigger: 'blur' }
        ],
        bank: [
          { required: true, message: '请选择基本开户银行', trigger: 'change' }
        ],
        accountNumber: [
          { required: true, message: '请输入基本开户账号', trigger: 'blur' },
          { min: 1, max: 32, message: '长度在 1 到 128个字符', trigger: 'blur' }
        ],
        registeredAddress: [
          { required: true, message: '请输入注册场所地址', trigger: 'blur' },
          { min: 1, max: 128, message: '长度在 1 到 128个字符', trigger: 'blur' }
        ],
        registeredFixedPhone: [
          { required: true, message: '请输入注册固定电话', trigger: 'blur' },
          { 
            validator(rule, value, callback) {
              if(!validatePhone(value) && !validateTelephone(value)){
                callback(new Error("电话格式有误"))
              }
              else{
                 callback();
              }
            }, 
            trigger: 'blur' 
          }
        ]
    },
    };
  },
  created(){
    this.companyCode = this.$route.query.code ? this.$route.query.code : "";
  },
  methods: {
    getInfo(code) {
      getInvoiceInfo(code).then(response => {
        this.form = response.data;
        this.form.type = this.form.type.toString();
        if (this.form.type === "0") {
          this.isReceiverUserNameShow = false;
          this.rules.receiverUserCode.required = false;
        }
        this.getReceiverUserNameOptions(response.data.type);
      });
    },
    // 开票类型
    changeType(value) {
      this.form.receiverUserCode = "";
      if (value === "0") {
        // 隐藏该项/取消验证
        this.isReceiverUserNameShow = false;
        this.rules.receiverUserCode.required = false;
      } else {
        // 显示该项/增加验证
        this.isReceiverUserNameShow = true;
        this.rules.receiverUserCode.required = true;
        this.getReceiverUserNameOptions(value);
      }
    },
    // 获取实际收票人选项
    getReceiverUserNameOptions(value) {
      const data = { staffType: 0 , companyCode: this.companyCode};
      switch (value) {
        case "1":
          data.staffType = 4;
          break;
        case "2":
          data.staffType = 6;
          break;
      }
      getShipperList(data).then(response => {
        this.receiverUserNameOptions = response.data.records;
      });
    },
    // 提交
    funcSubmit() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          const rLoading = this.openLoading();
          editInvoiceInfo(this.form)
            .then(response => {
              rLoading.close();
              this.$message({ message: response.msg, type: "success" });
              this.$emit("fatherEditMethod");
            })
            .then(() => this.$refs["form"].resetFields());
        } else {
          return false;
        }
      });
    },
    // 取消
    funcCancel() {
      this.$emit("fatherCancelMethod", "edit");
    }
  }
};
</script>
<style lang="scss" scoped>
.el-select {
  width: 100%;
}
.dialog-footer {
  margin: 15px 0 15px 0;
  width: 175px;
  float: right;
}
</style>
